<template>
    <div>
        <div class="padding3 clearfix">
            <van-row class="bj-tit-box">
                <van-col span="3">
                    <img class="fl icon_return" src="../../assets/image/center/icon_return.png" alt="" @click="returnIndex">
                </van-col>
                <van-col span="18" class="text-align-c font-36">
                    我喜欢哪些？
                </van-col>
                <van-col span="3">
                    <img class="fr bj-img" v-if="isBc == false" src="../../assets/image/bj.png" alt="" @click="isBc = true">
                    <span class="fr bj-text" v-else @click="isBc = false">完成</span>
                </van-col>
            </van-row> 
                <!--我喜欢的游戏列表模块-->
                <van-row class="margin-top5">
                    <van-col span="6" class="martop" v-for="(item,index) in likeService" :key="index">
                        <div class="game-icon" @click="deleteLikeService(item.id),listLink(item)">
                            <img :src="$imgPath(item.service.image)">
                            <div class="jian" v-if="isBc">-</div>
                        </div>
                        <span class="like-game">
                            {{item.service.name}}
                        </span>
                    </van-col>
                </van-row>           
            <van-row class="margin-top-2" v-for="(item,index) in unauthorizedList" :key="index" v-if="item.listService.length > 0">
                <van-col span="24">
                    <div class="bj-tit-box">
                        <span class="gmae-line">|</span>{{item.name}}
                    </div>
                </van-col>
                <van-row class="margin-top5">
                    <van-col span="6" class="martop" v-for="(itemEr,indexEr) in item.listService" :key="indexEr">
                        <div class="game-icon" @click="listLink1(itemEr)">
                            <img :src="$imgPath(itemEr.serviceLogo)">
                            <div class="jia" v-if="isBc">+</div>
                        </div>
                        <span class="like-game">
                                {{itemEr.serviceName}}
                            </span>
                    </van-col>
   
                </van-row>
            </van-row>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant';
export default {
    data(){
        return{
            isBc:false,
            likeService:[],
            unauthorizedList:[],
            likeServiceCount:0
        }
    },
    mounted(){
        this.likeList()
        this.unauthorized()
    },
    methods:{
        //获取我喜欢的服务列表
        likeList(){
                apiHttp.apiIndex.serviceListBy('',resp=>{
                    if(resp.code == 200){
                        this.likeService = resp.data.content
                        this.likeServiceCount = this.likeService.length;
                    }
                })
            
        },
       // 未认证服务
        unauthorized(){
            apiHttp.apiIndex.nolikeService('',resp=>{
                if(resp.code == 200){
                    for(let i = 0; i<resp.data.length; i++){
                        this.unauthorizedList.push(resp.data[i])
                    }
                }
            })
        },
        // 添加服务
        addLikeService(item){
            if(this.likeServiceCount===4){
                Toast("最多只能添加4个")
            }else{
                let parmes = {
                serviceId:item.serviceId
                }
                if(this.isBc){
                    apiHttp.apiIndex.addLikeService(parmes,resp=>{
                        if(resp.code == 200){
                            Toast('添加成功')
                            this.likeList()
                        }else{
                            Toast(resp.message)
                        }
                    })
                }
            }
            
        },
        // 下架我喜欢的服务
        deleteLikeService(id){
            let parmes = {
                id:id
            }
            if(this.isBc){
                apiHttp.apiIndex.updateLikeService(this.$qs.stringify(parmes),resp=>{
                    if(resp.code == 200){
                        this.likeList()
                        Toast(resp.data)
                    }
                })
            }
        },
        // list页面跳转
        listLink(item){
            if(this.isBc == false){
                this.$router.push({
                    name:'list',
                    params:{
                        gameName:item.service.name,
                        gameId:item.service.id
                    }
                })
            } 
        },
        // list2页面跳转
        listLink1(item){
            if(this.isBc == false){
                this.$router.push({
                    name:'list',
                    params:{
                        gameName:item.serviceName,
                        gameId:item.serviceId
                    }
                })
            }else{
                this.addLikeService(item)
            } 
        },
        //返回首页
        returnIndex(){
            this.$router.push({
                name:"index"
            });
        }
    }
}
</script>

<style scoped>
.bj-tit-box{
    /* font-size: .6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    width: calc(100% - .2rem); */
    padding-left: .2rem;
    height: 1.36rem;
    line-height: 1.36rem;
    padding: .4rem .6rem;
    width: calc(100% - 1.2rem);
    overflow: hidden;
}
.icon_return{
    width: .9rem;
    margin-top: .28rem;
}
.bj-img{
    width: 0.9rem;
    margin-top: .4rem;
}
.bj-text{
    color: #ce4106;
    font-size: .68rem;
    text-align: right;
    font-weight:500;
}
.like-game{
    width: 80%;
    height: 1.2rem;
    display: block;
    font-size: .46rem;
    line-height: .65rem;
    color:#666666;
    overflow: hidden;
    text-align: center;
}
.margin-top5{
    margin-top: .6rem;
    padding-left: 0.5rem;
}
.margin-top-2{
    margin-top: 1.0rem;
}
.gmae-line{
    color: #ce4106;
    font-size: .72rem;
    font-weight: 900;
    margin-right: .4rem;
}
.game-icon{
    width: 1.8rem;
    position: relative;
    padding-left: 0.6rem;
}   
.jian{
    text-align: center;
    float: right;
    width: .6rem;
    height: .6rem;
    line-height: .4rem;
    border-radius: 50%;
    font-size: 1.0rem;
    color: #666666;
    background-color: #EEEEEE;
    position: absolute;
    right: 0;
    top: -.2rem;
}
.jia{
    text-align: center;
    float: right;
    width: .6rem;
    height: .6rem;
    line-height: .6rem;
    border-radius: 50%;
    font-size: .68rem;
    color: white;
    background-color: #D84E4D;
    position: absolute;
    right: 0;
    top: -.2rem;
}
    .martop{
        margin: .4rem  0;
    }
</style>

